<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>矩形树图：type = treemap</title>
  <script src="./echarts.js"></script>
  <script src="./data/TreeMapData.js"></script>
  <style lang="css">
    #chart1,
    #chart2 {
      width: 100%;
      height: 668px;
      /* border: 1px solid red; */
      float: left;
    }
  </style>
</head>

<body>
  <div id="chart1"></div>

  <script>
    /**
     * 数据格式
     * [
     *    {
     *        name: 'title',
     *        children: [
     *            {
     *                name: 'title.show',
     *                value: 1880
     *            },
     *            {
     *                name: 'title.textStyle',
     *                children: [
     *                    {
     *                        name: 'title.textStyle.color',
     *                        value: 599
     *                    },
     *                    ...
     *                ]
     *            },
     *            ...
     *        ]
     *
     *    },
     *    ...
     * ]
      */
    function convert (source) {
      return (function inner(source, target, basePath) {
        for (let key in source) {
          const path = basePath ? basePath + '.' + key : key
          if (key.indexOf('$') == -1) {
            target.children = target.children || []
            let child = {
              name: path
            }
            target.children.push(child)

            inner(source[key], child, path)
          }
        }
        // 在这里添加数据
        if (!target.children) {
          target.value = source.$count || 1
        } else {
          if (source.$count !== undefined) {
            target.children.push({
              name: basePath,
              value: source.$count || 1
            })
          }
        }
        return target
      })(source, [], '')
    }
    const newData = convert(TreeMapData)
    console.log(newData)

    const myChart1 = echarts.init(document.getElementById('chart1'));

    myChart1.setOption({
      title: {
        text: 'Echarts 配置项查询分布',
        subtext: '2016/04'
      },
      tooltip: {},
      series: [
        {
          name: 'option',
          type: 'treemap',
          data: convert(TreeMapData).children,
          squareRatio: 0.5 * (1 + Math.sqrt(5)),
          leafDepth: 1,
          drillDownIcon: '▶',
          roam: 'move', // scale、move、true、false
        }
      ]
    })
  </script>
</body>

</html>